<template>
  <div class="login">
    <el-card class="login_center">
      <template #header>
        <div class="card_header">
          <span>用户登录</span>
        </div>
      </template>
      <el-form :model="loginFormState" :rules="rules" ref="loginFormRef">
        <el-form-item prop="name">
          <el-input
            v-model.trim="loginFormState.name"
            maxlength="32"
            placeholder="请输入账号"
            clearable
          >
            <template #prefix>
              <icons name="User"></icons>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input
            v-model.trim="loginFormState.pwd"
            maxlength="16"
            show-password
            placeholder="请输入密码"
            clearable
            @keyup.enter.exact="handleLogin"
          >
            <template #prefix>
              <Icons name="Lock"></Icons>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="width: 100%"
            :loading="loginFormState.loading"
            @click="handleLogin"
          >
            登 录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
  import { testsapi } from "@/api/index";
  import { nextTick, onMounted, reactive, ref } from "vue";
  import { UserLogin } from "@/router/index";
  import { ElMessage } from "element-plus";
  import { useRouter } from "vue-router";
  import { useUserStore } from "../../stores";
  import { encode } from "js-base64";

  const router = useRouter();
  const loginFormRef = ref();

  const { setToken, setJwt, setUserInfo } = useUserStore();

  const loginFormState = reactive({
    name: "admin",
    pwd: "123789",
    loading: false,
  });

  const rules = {
    name: [{ required: true, message: "账号不能为空", trigger: "blur" }],
    pwd: [
      { required: true, message: "密码不能为空", trigger: "blur" },
      {
        min: 5,
        max: 16,
        message: "密码长度为5-16位",
        trigger: "blur",
      },
    ],
  };
  // 登录
  const handleLogin = () => {
    loginFormRef.value.validate((res) => {
      if (res) {
        let params = {
          username: loginFormState.name,
          password: loginFormState.pwd,
          roles: "", // 这个地方是从后台获取的
        };
        testsapi
          .PostLogIn(params)
          .then((res) => {
            let { code, result, message } = res.data;
            if (code == 200) {
              sessionStorage.setItem("token", result.token);
              //eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MDg2MTY4NjUsInVzZXJuYW1lIjoiYWRtaW4ifQ.v3ITLAps82kFsP3xyBv59fF6jYDX3n4jEZEfACfQK4U

              setToken(result.token);
              // encode;
              setJwt(result.token);

              ElMessage.success("登录成功");
              UserLogin(params);
            } else {
              ElMessage.error("登录失败：" + message);
            }
          })
          .catch(() => {});

        return;
      }
    });
  };
</script>

<style lang="scss" scoped>
  .login {
    width: 100vw;
    height: 100vh;
    background-image: url("../../assets/img/login.jpg");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .login_center {
      width: 396px;
      height: auto;
    }

    .card_header {
      font-size: 18px;
      text-align: center;
    }
  }
</style>
